<!--
 * @Description: 
 * @Author: linjz
 * @Date: 2021-06-25 10:25:00
 * @LastEditors: linjz
 * @LastEditTime: 2021-06-28 10:07:38
-->
<template>
  <!-- 资讯列表页面 -->
  <div>
    <!-- 搜索模块 -->
    <div class="search">
      <!-- {{ searchForm }} -->
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="searchForm.status" placeholder="状态" clearable>
            <el-option label="未审核" value="未审核"></el-option>
            <el-option label="审核通过" value="审核通过"></el-option>
            <el-option label="审核不通过" value="审核不通过"></el-option>
            <el-option label="推荐" value="推荐"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="searchForm.categoryId"
            placeholder="请选择栏目"
            clearable
          >
            <el-option
              v-for="item in categoryData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toQuery">查询</el-button>
        </el-form-item>

        <!-- 发布风采 -->
        <el-button class="publish" type="primary" @click="toPublish"
          >发布风采</el-button
        >
      </el-form>
    </div>

    <!-- 表格模块 -->
    <div>
      <!-- {{ tableData }} -->
      <el-table :data="tableData" style="width: 100%" @row-click="toDetails">
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column label="封面" width="100" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 100px"
              :src="scope.row.cover"
              :preview-src-list="[scope.row.cover]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column class="col" label="风采" align="left">
          <template slot-scope="scope">
            <ul class="ul">
              <li>{{ scope.row.title }}</li>
              <li>
                {{ scope.row.baseUser ? scope.row.baseUser.realname : "" }}
              </li>
              <li>{{ scope.row.category ? scope.row.category.name : "" }}</li>
              <li>
                {{ moment(scope.row.publishTime).format("yyyy-MM-DD") }}
              </li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '审核通过'" type="success"
              >审核通过</el-tag
            >
            <el-tag v-else-if="scope.row.status === '未审核'" type="info"
              >未审核</el-tag
            >
            <el-tag v-else-if="scope.row.status === '推荐'" type="warning"
              >推荐</el-tag
            >
            <el-tag v-else-if="scope.row.status === '删除'" type="info"
              >删除</el-tag
            >
            <el-tag v-else type="danger">审核不通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click.stop="toRecom(scope.row.id)"
              >推荐</el-button
            >
            <el-button
              type="text"
              @click.stop="toExam(scope.row)"
              style="color: #3a71a8"
              >审核</el-button
            >
            <el-button
              type="text"
              @click.stop="toDelete(scope.row.id)"
              style="color: #e65d6e"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="page">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[2, 5, 10, 15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 推荐、删除的模态框 -->
    <div>
      <el-dialog
        title="提示"
        :visible.sync="recDelVisible"
        width="20%"
        :message="message"
      >
        <span v-if="this.message === '推荐'">您确定要推荐此资讯吗?</span>
        <span v-else>此操作将永久删除该数据, 是否继续??</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="recDelVisible = false">取 消</el-button>
          <el-button type="primary" @click="recDelSave">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 审核的模态框 -->
    <div>
      <el-dialog
        title="审核风采信息"
        :visible.sync="examVisible"
        id=""
        th="60%"
      >
        <h3>{{ this.artTitle }}</h3>
        <div v-html="this.artContent"></div>
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="notExam">审核不通过</el-button>
          <el-button type="primary" @click="exam">审核通过</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { findAll as queryCategory } from "@/api/infoCategory";
import {
  pageQuery as queryArticle,
  changeStatus,
  deleteById,
} from "@/api/article";
import moment from "moment";

export default {
  data() {
    return {
      // 搜索表单的数据
      searchForm: {
        status: "",
        title: "",
        categoryId: "",
      },
      // 栏目信息
      categoryData: {},
      // 表格数据
      tableData: {},
      // 分页查询
      params: {
        page: 1,
        pageSize: 10,
      },
      // 总条数
      total: 0,
      // 推荐/删除
      message: "",
      // 推荐、删除的模态框显示
      recDelVisible: false,
      // 审核的模态框显示
      examVisible: false,
      // 咨询信息的数据
      art: {
        artID: "",
        artTitle: "",
        artContent: "",
      },
    };
  },
  computed: {},
  watch: {
    // 深度监听分页参数
    params: {
      handler() {
        this.queryTableData();
      },
      deep: true,
    },
  },
  methods: {
    // 获取栏目信息
    async queryCategoryData() {
      let res = await queryCategory();
      // console.log(res);
      this.categoryData = res.data;
    },
    // 获取资讯信息
    async queryTableData() {
      let temp = { ...this.params, ...this.searchForm };
      for (let key in temp) {
        // key是一个变量，代表的属性名
        if (!temp[key]) delete temp[key];
      }
      let res = await queryArticle(temp);
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    // 跳转至发布风采页面
    toPublish() {
      this.$router.push({ path: "Publish" });
    },
    // 每页显示条数发生变化时
    handleSizeChange(val) {
      this.params = {
        page: 1,
        pageSize: val,
      };
    },
    handleCurrentChange(val) {
      this.params.page = val;
    },
    // 时间格式转换
    moment,
    // 查询按钮点击处理事件
    async toQuery() {
      this.queryTableData();
    },
    // 推荐按钮点击处理事件
    toRecom(id) {
      this.message = "推荐";
      this.recDelVisible = true;
      this.artID = id;
    },
    // 审核按钮点击处理事件
    toExam(row) {
      this.message = "审核";
      this.artID = row.id;
      this.artTitle = row.title;
      this.artContent = row.content;
      // console.log(this.artContent);
      // document.getElementById("content").innerHTML = this.artContent;
      // console.log(parent.$refs.content);
      // var parent = new Vue("#parent");
      // console.log(parent.$refs.content);
      this.examVisible = true;
    },
    // 删除按钮点击处理事件
    toDelete(id) {
      this.message = "删除";
      this.recDelVisible = true;
      this.artID = id;
    },
    // 推荐/删除的模态框确定按钮点击触发事件
    async recDelSave() {
      if (this.message === "推荐") {
        let res = await changeStatus({ id: this.artID, status: this.message });
        // console.log(res);
        if (res.status === 200) {
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success",
          });
        } else {
          return false;
        }
      } else if (this.message === "删除") {
        let res = await deleteById({ id: this.artID });
        if (res.status === 200) {
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success",
          });
        } else {
          return false;
        }
      }
      this.queryTableData();
      this.recDelVisible = false;
    },
    // 审核不通过按钮点击处理事件
    async notExam() {
      let res = await changeStatus({ id: this.artID, status: "审核不通过" });
      if (res.status === 200) {
        this.$notify({
          title: "成功",
          message: res.message,
          type: "success",
        });
      } else {
        return false;
      }
      this.queryTableData();
      this.examVisible = false;
    },
    // 审核不通过按钮点击处理事件
    async exam() {
      let res = await changeStatus({ id: this.artID, status: "审核通过" });
      if (res.status === 200) {
        this.$notify({
          title: "成功",
          message: res.message,
          type: "success",
        });
      } else {
        return false;
      }
      this.queryTableData();
      this.examVisible = false;
    },
    toDetails(row, event, column) {
      // console.log(row, event, column);
      this.$router.push({
        path: "Details",
        query: { id: row.id },
      });
    },
  },
  created() {
    this.queryCategoryData();
    this.queryTableData();
  },
  mounted() {},
};
</script>
<style scoped>
.publish {
  float: right;
}
.ul {
  font-size: 12px;
}
.ul li:first-child {
  font-weight: 700;
}
.col {
  width: calc(100% - 480px);
}
.page {
  float: right;
  margin-top: 10px;
}
h3 {
  text-align: center;
}
</style>